// 导入Vite的defineConfig函数，用于定义配置
import { defineConfig } from 'vite'
// 导入Vue插件，用于支持Vue单文件组件的编译和处理
import vue from '@vitejs/plugin-vue'
// 导入path模块，用于处理文件路径
import path from 'path'

// 导出Vite配置
export default defineConfig({
  // 配置插件列表
  plugins: [
    // 使用Vue插件，支持Vue单文件组件(.vue文件)的编译、模板处理、样式提取等
    vue(),
    // 自定义插件，在构建结束后复制Static目录
    {
      name: 'copy-static-assets',
      async closeBundle() {
        // 仅在生产构建时执行
        if (process.env.NODE_ENV === 'production') {
          try {
            // 使用动态导入Node.js模块
            const fs = await import('fs');
            const path = await import('path');
            const staticDir = path.resolve(__dirname, 'Static');
            const outputDir = path.resolve(__dirname, 'dist/Static');

            console.log(`Source Static directory: ${staticDir}`);
            console.log(`Target directory: ${outputDir}`);

            // 检查源目录是否存在
            if (!fs.existsSync(staticDir)) {
              console.error(`Source directory ${staticDir} does not exist!`);
              return;
            }

            // 递归复制目录函数
            async function copyDir(src, dest) {
              if (!fs.existsSync(dest)) {
                fs.mkdirSync(dest, { recursive: true });
                console.log(`Created directory: ${dest}`);
              }

              const files = fs.readdirSync(src);
              console.log(`Found ${files.length} files in ${src}`);

              for (const file of files) {
                const srcPath = path.join(src, file);
                const destPath = path.join(dest, file);
                const stat = fs.statSync(srcPath);

                if (stat.isDirectory()) {
                  await copyDir(srcPath, destPath);
                } else {
                  fs.copyFileSync(srcPath, destPath);
                  console.log(`Copied file: ${srcPath} -> ${destPath}`);
                }
              }
            }

            // 复制Static目录
            // await copyDir(staticDir, outputDir);
            // console.log('Successfully copied Static directory to dist/Static');
          } catch (error) {
            console.error('Error copying Static directory:', error);
          }
        }
      }
    }
  ],

  // 配置模块解析选项
  resolve: {
    // 配置路径别名，简化代码中的导入路径
    alias: {
      // 将@符号映射到项目的src目录
      // 示例：import Component from '@/components/Component.vue'
      '@': path.resolve(__dirname, 'src'),
      // 将Static映射到项目根目录下的Static目录，用于引用静态资源
      'Static': path.resolve(__dirname, 'Static'),
      // 将Video映射到项目根目录下的Video目录，用于引用视频资源
      'Video': path.resolve(__dirname, 'Video')
    }
  },

  // 扩展Vite默认的静态资源处理范围
  // Vite默认会处理常见的静态资源(如图片、字体等)，这里添加额外需要处理的文件类型
  assetsInclude: [
    '.avif',  // AVIF图片格式
    '.mp4',   // MP4视频格式
    '.png',   // PNG图片格式
    '.svg',   // SVG图片格式
    '.css',   // CSS样式文件
    '.js'     // JS脚本文件
  ],

  // 配置生产环境构建选项
  build: {
    // 指定构建输出目录为dist
    outDir: 'dist',
    // 指定静态资源输出目录为dist/assets
    assetsDir: 'assets',
    // 确保静态资源被正确包含
    assetsInclude: ['**/*.avif', '**/*.png', '**/*.mp4', '**/*.svg'],
    // 配置底层Rollup打包工具的选项
    rollupOptions: {
      // 配置打包入口文件
      input: {
        // 主入口文件为index.html
        main: path.resolve(__dirname, 'index.html'),
        // 额外入口文件为src/style.css
        style: path.resolve(__dirname, 'src/style.css')
      },
      // 配置输出文件命名规则
      output: {
        // 静态资源文件命名规则：assets/[文件名]-[哈希值][文件扩展名]
        // 哈希值用于避免浏览器缓存问题
        assetFileNames: 'assets/[name]-[hash][extname]',
        // 代码分割文件命名规则：assets/[文件名]-[哈希值].js
        chunkFileNames: 'assets/[name]-[hash].js',
        // 入口文件命名规则：assets/[文件名]-[hash].js
        entryFileNames: 'assets/[name]-[hash].js'
      }
    }
  },
  // 配置开发服务器选项
  server: {
    // 配置允许的主机
    allowedHosts: ['cadgily-nonthreatening-glayds.ngrok-free.app', 'localhost', '127.0.0.1'],
    // 配置开发服务器监听的端口为3000
    port: 3000,
    // 配置服务器启动后自动打开浏览器访问项目
    open: true
  }
})